import { createRouter, createWebHashHistory } from "vue-router";
import { ElLoading } from "element-plus";

const routes = [
	{
		path: "/",
		redirect: "/home",
	},
	{
		path: "/home",
		name: "Home",
		component: () => import("@/views/Home.vue"),
		children: [
			{
				path: "list",
				name: "List",
				component: () => import("@/components/home/list/index.vue"),
				children: [
					{
						path: "tools",
						name: "Tools",
						component: () => import("@/components/home/list/tools/index.vue"),
						children: [
							{
								path: "color_processing",
								name: "Color_Processing",
								component: () =>
									import(
										"@/components/home/list/tools/children/color_processing.vue"
									),
							},
							{
								path: "image_processing",
								name: "Image_Processing",
								component: () =>
									import(
										"@/components/home/list/tools/children/image_processing.vue"
									),
							},
							{
								path: "json_editor",
								name: "Json_Editor",
								component: () =>
									import(
										"@/components/home/list/tools/children/json_editor.vue"
									),
							},
						],
					},
					{
						path: "config",
						name: "Config",
						component: () => import("@/components/home/list/config/index.vue"),
					},
				],
			},
			{
				path: "map",
				name: "Map",
				component: () => import("@/components/home/map/index.vue"),
			},
			{
				path: "web",
				name: "Web",
				component: () => import("@/components/home/web/index.vue"),
			},
			{
				path: "pwd",
				name: "Pwd",
				component: () => import("@/components/home/pwd/index.vue"),
			},
		],
	},
	{
		path: "/open_win",
		name: "OpenWin",
		component: () => import("@/views/OpenWin.vue"),
	},
	{
		path: "/color_processing",
		name: "New_Color_Processing",
		component: () =>
			import("@/components/home/list/tools/children/color_processing.vue"),
	},
	{
		path: "/image_processing",
		name: "New_Image_Processing",
		component: () =>
			import("@/components/home/list/tools/children/image_processing.vue"),
	},
	{
		path: "/json_editor",
		name: "New_Json_Editor",
		component: () =>
			import("@/components/home/list/tools/children/json_editor.vue"),
	}
];

const router = createRouter({
	history: createWebHashHistory("/"),
	routes,
});

let loadingInstance = null;

router.beforeEach((to, from, next) => {
	loadingInstance = ElLoading.service({
		lock: true,
		text: "加载中...",
		background: "rgba(0, 0, 0, 0.7)",
	});
	next();
});

router.beforeResolve((to, from, next) => {
	// 确保所有组件都解析完成后再关闭 loading
	next();
});

router.afterEach(() => {
	// 延迟关闭以确保过渡效果
	setTimeout(() => {
		if (loadingInstance) {
			loadingInstance.close();
			loadingInstance = null;
		}
	}, 300); // 300ms 延迟，可根据需要调整
});

export default router;
